<template>
    <div id="head">
        <div class="head-container">
            <div class="left">
                <div class="logo"><img src="img/logo.png" alt="YiTuo-logo"></div>
                <div class="menus">
                    <div @mouseenter="enter(index)" @mouseleave="leave" class="item" v-for="(item, index) in menus" :key="index">
                        <span>{{item.label}}</span>
                        <div class="pop pro-pop" v-show="item.children && index === activeIndex" :style="{left: popmove}">
                            <div class="pop-main">
                                <dl class="popClick" :key="idx" v-for="idx in (item.children && Math.round((item.children.length / 4)) || [])">
                                    <dd v-for="(val, vid) in (item.children && item.children.filter((i, id) => (id >= 4 * (idx - 1) && id < 4 * idx)))" :key="vid">{{val.label}}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <button class="login">登陆</button>
                <button class="free-use">免费试用</button>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue/dist/vue.js';
import { menus } from '@/assets/js/constant';
Vue.component('submenu-item', {
    props: ['item', 'index'],
    template: `<el-submenu :index="index" :key="index">
        <template slot="title">{{item.label}}</template>
        <el-menu-item :index="index+'-'+id" :key="index+'-'+id" v-for="(value, id) in item.children">{{value.label}}</el-menu-item>
    </el-submenu>`
});

export default {
    data() {
        return {
            menus,
            activeIndex: '0',
            popmove: 0
        }
    },
    components: {
        'menu-item': {
            props: ['item', 'index'],
            template: `<client-only><el-menu-item :index="index" :key="index">{{item.label}}</el-menu-item></client-only>`
        }
    },
    methods: {
        enter(index) {
            this.activeIndex = index;
            if(this.menus[index].children) {
                const popWidth = 75 * Math.round((this.menus[index].children.length / 4));
                const itemWidth = this.menus[index].label.length * 16 + 30;
                this.popmove = `-${(Math.abs(popWidth - itemWidth) / 2) * 3}px`;
            }
        },
        leave() {
            this.activeIndex = null;
        }
    }
}
</script>

<style lang="scss" scoped>
#head {
    width: 100%;
    position: absolute;
    z-index: 2;
    .head-container {
        width: 1250px;
        height: 60px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: calc((100% - 1250px) / 2);
        .left {
            display: flex;
            align-items: center;
            .logo > img{
                width: 212px;
                height: 30px;
            }
            .menus {
                margin-left: 23px;
                .item {
                    font-size: 16px;
                    font-family: PingFangSC;
                    font-weight: 400;
                    color: #FFFFFF;
                    padding: 15px;
                    position: relative;
                    display: inline-block;
                    .pop {
                        position: absolute;
                        left: 0;
                        top: 46px;
                        padding: 10px 0px;
                        background: #fff;
                        font-size: 14px;
                        // display: none;
                        background: #FFFFFF;
                        box-shadow: 0px 0px 6px 0px rgba(5, 22, 64, 0.26);
                        border-radius: 6px;
                        .pop-main {
                            display: flex;
                            .popClick {
                                dd {
                                    padding: 13px 35px;
                                    box-sizing: border-box;
                                    background: #fff;
                                    font-size: 14px;
                                    font-family: PingFangSC;
                                    font-weight: 400;
                                    color: #333333;
                                    white-space: nowrap;
                                }
                            }
                            .popClick > dd:hover {
                                color: #3F67D7;
                            }
                        }
                    }
                    .pop:after {
                        position: absolute;
                        border-left: 9px solid transparent;
                        border-right: 9px solid transparent;
                        border-bottom: 9px solid #fff;
                        content: " ";
                        display: block;
                        width: 0;
                        height: 0;
                        top: -8px;
                        left: calc(50% - 9px);
                    }
                }
                .item:hover {
                    font-size: 16px;
                    font-family: PingFangSC;
                    font-weight: 600;
                    color: #3F67D7!important;
                }
            }
        }
        .right {
            font-size: 16px;
            .login {
                width: 80px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                border-radius: 16px;
                border: 1px solid #EBEBEB;
                background: #FFFFFF;
                color: #333333;
            }
            .free-use {
                width: 110px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                border-radius: 20px 14px 14px 0;
                border: 1px solid #EBEBEB;
                margin-left: 30px;
                background: #FFA018;
                color: #FFFFFF;
            }
        }
    }
}
#head:hover {
    background: #fff;
    .menus {
        .item {
            color: #333333!important;
        }
    }
}
</style>